<%-- 
    Document   : chat
    Created on : 08 Apr 11, 10:40:03
    Author     : Dana
--%>
<%@page import="database.Database"%>
<%@page import="chating.User"%>
<%
if (session.getAttribute("token") == null)
    response.sendRedirect("index.jsp");
Database database = new Database();
String loggedOnUserUserName = (String)session.getAttribute("token");
User user = new User(database.getUserID(loggedOnUserUserName), loggedOnUserUserName, password, fullName, email, role, isBan, friends)
%>

<jsp:useBean id="memory" scope="application" class="chating.DataContainer" />
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <%@include file="head.jsp" %>
        <link rel="stylesheet" href="styles/chat.css" />
        <script type="text/javascript" src="scripts/chat.js"></script>
    </head>
    <body>
        <div class="roomlist">
            <div class="roomlisttitle">Rooms</div>
            <div class="roomlistpayloadwrapper">
                <div class="roomlistheader">
                    &nbsp;
                </div>
                <div class="roomlistpayload" id="roomlistpayloadonlinefriends">
                    <div class="category" id="category1">
                        <img alt="" class="roomlisticon" id="iconcategory1" src="designs/category.png" onclick="toggleCategory('1')" />
                        <a class="categorytext" href="javascript:toggleCategory('1');">fun</a>
                    </div>
                    <div class="rooms" id="roomscategory1">
                        <div class="room">
                            <img class="roomlisticon" src="designs/room.png" /> <a class="roomtext" href="javascript:openTab('#asikasik');">asik-asik</a>
                        </div>
                    </div>
                    <div class="category" id="category2">
                        <img alt="" class="roomlisticon" id="iconcategory2" src="designs/category.png" onclick="toggleCategory('2')" />
                        <a class="categorytext" href="javascript:toggleCategory('2');">love</a>
                    </div>
                    <div class="rooms" id="roomscategory2">
                        <div class="room">
                            <img class="roomlisticon" src="designs/room.png" /> <a class="roomtext" href="javascript:openTab('#priakesepian');">priakesepian</a>
                        </div>
                    </div>
                    <div class="category" id="category3">
                        <img alt="" class="roomlisticon" id="iconcategory3" src="designs/category.png" onclick="toggleCategory('3')" />
                        <a class="categorytext" href="javascript:toggleCategory('3');">game</a>
                    </div>
                    <div class="rooms" id="roomscategory3">
                        <div class="room">
                            <img class="roomlisticon" src="designs/room.png" /> <a class="roomtext" href="javascript:openTab('#suicide game');">suicide game</a>
                        </div>
                    </div>
                    <div class="category" id="category4">
                        <img alt="" class="roomlisticon" id="iconcategory4" src="designs/category.png" onclick="toggleCategory('4')" />
                        <a class="categorytext" href="javascript:toggleCategory('4');">18++</a>
                    </div>
                    <div class="rooms" id="roomscategory4">
                        <div class="room">
                            <img class="roomlisticon" src="designs/room.png" /> <a class="roomtext" href="javascript:openTab('#biru');">biru</a>
                        </div>
                        <div class="room">
                            <img class="roomlisticon" src="designs/room.png" /> <a class="roomtext" href="javascript:openTab('#minim');">minim</a>
                        </div>
                    </div>
                </div>
                <div class="roomlistfooter">
                    &nbsp;
                </div>

            </div>
            <div class="roomlisttitle">Online Friends</div>
            <div class="roomlistpayloadwrapper">
                <div class="roomlistheader">
                    &nbsp;
                </div>
                <div class="roomlistpayload">
                    <div class="category">

                        <img alt="" class="roomlisticon" id="iconfriend1" src="designs/friend.png" onclick="toggleCategory('1')" />
                        <a class="categorytext" href="javascript:openTab('m_ghufron');">m_ghufron</a>
                    </div>
                    <div class="category">
                        <img alt="" class="roomlisticon" id="iconfriend2" src="designs/friend.png" onclick="toggleCategory('1')" />
                        <a class="categorytext" href="javascript:openTab('andi_kur');">andi_kur</a>
                    </div>
                    <div class="category">
                        <img alt="" class="roomlisticon" id="iconfriend2" src="designs/friend.png" onclick="toggleCategory('1')" />
                        <a class="categorytext" href="javascript:openTab('terserah');">terserah</a>
                    </div>
                    <div class="category">
                        <img alt="" class="roomlisticon" id="iconfriend2" src="designs/friend.png" onclick="toggleCategory('1')" />
                        <a class="categorytext" href="javascript:openTab('mimin');">mimin</a>
                    </div>
                    <div class="category">
                        <img alt="" class="roomlisticon" id="iconfriend1" src="designs/friend.png" onclick="toggleCategory('1')" />
                        <a class="categorytext" href="javascript:openTab('momod');">momod</a>
                    </div>
                    <div class="category">
                        <img alt="" class="roomlisticon" id="iconfriend1" src="designs/friend.png" onclick="toggleCategory('1')" />
                        <a class="categorytext" href="javascript:openTab('riza_sp');">riza_sp</a>
                    </div>
                </div>
                <div class="roomlistfooter">
                    &nbsp;
                </div>
            </div>
        </div>
        <div class="payload">

            <div class="headerchat">
                <img style="cursor: pointer" alt="favicon75" src="designs/favicon_75.png" />
                <div  style="float: right;margin-top: 20px;">
                    <div class="chatheadertext">
                        Welcome,<a class="chatheadertext" href="panel.jsp">shitsahut</a>!
                    </div>
                    <div class="chatheadertext">
                        <a class="chatheadertext" href="panel.jsp">Options</a> | <a class="chatheadertext" href="signout.jsp">Sign Out</a>
                    </div>
                </div>
            </div>
            <div class="mainchat">

                <div class="chatbox">
                    <div class="tabwrapper">
                        <div class="tabs" id="tabs">
                            <script type="text/javascript">
                                $('tabs').style.width = 174*4+"px";
                            </script>
                            <div class="tabtitle tabclosed" id="tab#asikasik">
                                <a href="javascript:activateTab('#asikasik');" class="tabtitletext">#asik-asik</a>
                                <a href="javascript:closeTab('#asikasik')" class="tabcloser">
                                    x
                                </a>
                            </div>
                            <div href="javascript:activateTab('riza_sp');" class="tabtitle tabopened" id="tabriza_sp">
                                <a href="javascript:activateTab('riza_sp');" class="tabtitletext">riza_sp</a>
                                <a href="javascript:closeTab('riza_sp')" class="tabcloser">
                                    x
                                </a>
                            </div>
                             <div class="tabtitle tabclosed" id="tabaang">
                                <a href="javascript:activateTab('aang');" class="tabtitletext">aang</a>
                                <a href="javascript:closeTab('aang')" class="tabcloser">
                                    x
                                </a>
                            </div>
                             <div href="javascript:activateTab('hot');" class="tabtitle tabnotif" id="tabhot">
                                <a href="javascript:activateTab('hot');" class="tabtitletext">hot</a>
                                <a href="javascript:closeTab('hot')" class="tabcloser">
                                    x
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="chatboxpayload">
                        <div class="chatboxplaygroundwrapper">
                            <div class="chatboxplayground" id="playground">
                                <%
                                    for (int i = 0; i < 200; ++i) {
                                %>
                                <div class="chatelement">
                                    <span class="chatusername">riza_sp:</span>
                                    <span class="chat">Kamu apa kabar?</span>
                                </div>
                                <%
                                    }
                                %>
                            </div>
                            <div class="chatinput">
                                <form action="" method="post">
                                    <input id="chatinput" class="chatinputinput" type = "text" name="chat" autofocus="autofocus" />
                                </form>
                            </div>
                        </div>
                        <script type="text/javascript">
                            $('playground').scrollTop = 5000;
                        </script>
                        <div style="display: block;" class="roomuserlistwrapper">
                            <script type="text/javascript">
                                rulOpened = false;
                            </script>
                            <a style="display: none" id="rultitle" href="javascript:toggleRoomUserList();" class="roomuserlisttitle">on this room</a>
                            <div id="rulpayload" style="display: none">
                                <div class="roomlistheader">&nbsp;</div>
                                <div class="roomuserlistpayload">
                                    <div class="roomuserlistitem">
                                        <img class="roomlisticon" src="designs/friend.png" />
                                        <a class="categorytext" href="">riza_sp</a>
                                    </div>
                                </div>
                                <div class="roomlistfooter">&nbsp;</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div style="display: none">


            <%@include file="footer.jsp" %>
        </div>
    </body>
</html>
